import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

TabBar {
    id: bar
    z:200
    position:TabBar.Footer
    signal changeTab(int index);
    Repeater{
        model:[
            {"index":0,"text":"签到","source":"qrc:/img/work-clock-tab.png"},
            {"index":1,"text":"统计","source":"qrc:/img/work-clock-stat-tab.png"}
        ]
        TabButton {
            onClicked:{
                bar.changeTab(modelData.index);
            }
            text: modelData.text
            contentItem: Rectangle{
                id:tabContent
                implicitHeight: 45
                implicitWidth: 25
                function isThis(){
                    return bar.currentIndex === modelData.index
                }
                ColumnLayout{
                    anchors.fill:parent
                    Image{
                        source:modelData.source
                        sourceSize:Qt.size(25,25)
                        Layout.alignment: Qt.AlignCenter
                        Layout.preferredWidth: 25
                        Layout.preferredHeight: 25
                        ColorOverlay{
                            anchors.fill:parent
                            source:parent
                            color:"#2A9CFF"
                            visible:tabContent.isThis()
                        }
                    }
                    Text{
                        Layout.alignment: Qt.AlignCenter
                        Layout.fillWidth: true
                        Layout.preferredHeight: 20
                        text:modelData.text
                        fontSizeMode: Text.FixedSize
                        color:tabContent.isThis()?"#2A9CFF":"#3A4654"
                        horizontalAlignment : Text.AlignHCenter

                        font{
                            family:"迷你简汉真光标"
                            pixelSize: 8
                        }
                    }
                }
            }

            background: Rectangle {

            }
        }
    }
}
